<template>
  <div class="main-container">
    <el-card class="header-box-card" shadow="never" body-style="{ padding-top: 20px; padding-right: 20px; padding-left: 10px; padding-bottom: 10px; }">
			<div v-if="isLogin" style="text-align: right;">
				<el-button @click="logout">退出聊天室</el-button>
			</div>
			<div v-if="!isLogin" style="text-align: right;">
				<el-button @click="login">领取身份</el-button>
			</div>
			<div v-else>
				<p>{{ username }}:</p>
			</div>
			<div style="margin-top: 15px; text-align: center;">
			  <el-input placeholder="请输入内容" v-model="message" style="width: 80%;">
<!-- 			    <template slot="append" style="cursor: pointer;">发送</template> -->
			  </el-input>
				<el-button @click="send">发送</el-button>
			</div>
			<ul class="chat-windows">
				<li v-for="i in messageList" class="chat-row">{{ i }}</li>
			</ul>
    </el-card>
		
		<VueWebSocket ref="vueWebSocketRef" :user="username" @addMessage="addMessage($event)" />

  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import VueWebSocket from '@/components/vueWebSocket'

export default {
  computed: {
    ...mapGetters([
    ])
  },
	components: {
	  VueWebSocket,
	},
	data () {
		return {
			isLogin: false,
			username: "",
			message: "",
			messageList: []
		}
	},
  mounted () {
  },
  methods: {
    // 获取身份，连接socket
		login () {
			let index = Math.floor(Math.random() * 100);
			console.log(index)
			let username = index + "号用户"
			this.username = username
			this.isLogin = true
			this.$refs.vueWebSocketRef.connect(username)
		},
		send (evt) {
			this.$initBtnStatus(evt)
			if (!this.message) return this.$errorMsg("内容不能为空")
			if (!this.isLogin) return this.$errorMsg("请先领取身份")
			// console.log(this.message)
			this.$refs.vueWebSocketRef.send(this.message)
			this.$successMsg("发送成功")
			this.message = ""
		},
		addMessage (message) {
			this.messageList.push(message)
		},
		// 退出聊天室
		logout () {
			this.$refs.vueWebSocketRef.destroyed()
			this.isLogin = false
		}
  }
}
</script>


<!-- 局部样式 -->
<!-- lang表示其中样式语法使用scss语法-->
<!-- scoped表示作用域，表示其中样式只在此组件中生效 -->
<style lang="scss" scoped>


.header-box-card {
  // height: 100px;
  margin-bottom: 20px;
}

.filter-box-card {
  // height: 100px;
  margin-bottom: 20px;
}

.chat-windows {
	border: 1px solid #000;
	// padding: 20px;
	padding-top: 20px;
	height: 500px;
	overflow: auto;
	
	.chat-row {
		margin-bottom: 15px;
	}
}


</style>